<div class="main-container">
  <div class="main-title">
    黄委会调度计划
  </div>
  <div class="main-content">
    <div class="content-top-bar">
      <div class="search-box">
        <div class="main-title">
          {{planName}}
        </div>
      </div>
      <div class="table-btn-group">
        <a (click)="viewFile(file,tplContent)" *ngIf="file">文件预览</a>
        <button *ngIf="pageType!='detail'" nz-button nzType="primary" (click)="save()">保存</button>
        <button nz-button nzType="primary" (click)="goBack()">返回</button>
      </div>
    </div>

    <div class="table-content dark-blue-table">
      <nz-table #editableTable [nzData]="editableTableData" nzBordered [nzFrontPagination]="false" nzSize="middle">
        <thead>
        <tr>
          <th rowspan="3" style="width: 140px">项目</th>
          <th colspan="8">黄河干流（m³/s, 亿m³）</th>
          <th colspan="2">黄河支流（万m³）</th>
        </tr>
        <tr>
          <th rowspan="2">刘家峡水库<br/>月均下泄</th>
          <th colspan="2">刘家峡至下河沿</th>
          <th rowspan="2">下河沿<br/>月平均</th>
          <th colspan="3">下河沿至石嘴山</th>
          <th rowspan="2">石嘴山<br/>月平均</th>
          <th colspan="2">渭河宁夏（泾河）</th>
        </tr>
        <tr>
          <th>取水</th>
          <th>耗水</th>
          <th>取水</th>
          <th>退水</th>
          <th>耗水</th>
          <th>取水</th>
          <th>耗水</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of editableTable.data" class="editable-row">
          <td>{{data.project}}</td>
          <ng-container *ngFor="let item of tenDaysValArr">
            <td>
              <div class="editable-cell" *ngIf="!isEditableTd(data.id); else editRow">
                <div class="editable-cell-value-wrap" (click)="startEdit(data.id, $event)">
                  {{ data[item] }}
                </div>
              </div>
              <ng-template #editRow>
                <input type="text" nz-input [(ngModel)]="data[item]"/>
              </ng-template>
            </td>
          </ng-container>
        </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="canvas-wrap" #canvasDiv>
      <div id="topology-canvas"></div>
    </div>
  </div>
  <ng-template #tplContent let-params let-ref="modalRef">

    <ng-container *ngIf="fileType === 'pdf'">
      <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
    </ng-container>
    <ng-container *ngIf="fileType === 'png' || fileType === 'jpg'">
      <div style="width: 1050px;max-height: 800px;overflow: auto">
        <img [src]="fileSrc" alt=""/>
      </div>
    </ng-container>

    <ng-container *ngIf="fileTypeList.indexOf(fileType) < 0">
      <div style="margin: 20px;font-size: 20px">该文件类型无法预览，请下载后自行打开</div>
    </ng-container>

  </ng-template>
</div>
